<script setup>
import { ref } from 'vue';
import HomeButton from '@/views/home/components/HomeButton.vue';
import { ElMessage } from 'element-plus';
const className = ref(['is-show'])
//自定义校验规则(手机号规则)
const isPhoneNumber = (rule, value, callback) => {
    const reg = /^1[0-9]{10}$/
    console.log(value)
    if (reg.test(value)) {
        callback()
    } else {
        callback(new Error('请输入正确的手机号格式'))
    }
}
//表单校验规则
const formRule = ref({
    name: [
        { required: 'true', message: "请输入姓名", trigger: 'blur' }
    ],
    phone: [
        { required: 'true', message: "请输入电话", trigger: 'blur' },
        { validator: isPhoneNumber, trigger: 'blur' }
    ],
    resource: [
        {
            required: 'true', message: "请输入需要提供的资源", trigger: 'blur'
        }
    ]
})
//绑定表单数据
const formValue = ref({
    name: '',
    phone: '',
    resource: ''
})

//绑定表单对象
const form = ref(null);

//表单提交校验
const sub = (form) => {
    form.validate((isOk) => {
        if (isOk) {
            ElMessage({
                message: "提交成功",
                type: 'success'
            })
        } else {
            return false;
        }
    })
}

</script>


<template>
    <div class="enter-form">
        <div class="enter-form_container">
            <h2>入驻申请</h2>
            <div class="form-body">
                <el-form style="max-width: 493px" :rules="formRule" :model="formValue" ref="form">
                    <el-form-item prop="name">
                        <el-input placeholder="您的姓名" v-model="formValue.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input placeholder="您的手机号码" v-model="formValue.phone"></el-input>
                    </el-form-item>
                    <el-form-item prop="resource">
                        <el-input placeholder="您要供应的资源" v-model="formValue.resource"></el-input>
                    </el-form-item>
                </el-form>
                <HomeButton :className="className" class="color" @click="sub(form)">提交信息</HomeButton>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.enter-form {
    padding-top: 50px;
    display: flex;
    justify-content: center;
    background: url('@/assets/img/apply-bg.jpg');
    height: 580px;

    .enter-form_container {
        margin-left: 180px;

        h2 {
            font-size: 30px;
            border-left: 2px solid black;
            padding-left: 20px;
        }
    }
}


.form-body {
    width: 1200px;
}

.el-input {
    margin-top: 30px;
    height: 60px;
}

.is-show {
    display: flex
}

.color {
    margin-top: 50px;
    background-color: #ff7200;
    color: white
}
</style>